/*
 * @Author: your name
 * @Date: 2020-07-13 23:50:01
 * @LastEditTime: 2020-07-16 00:00:53
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ts\react_app\src\item.js
 */

import React, { Component } from 'react'

import PropTypes from 'prop-types'

export default class ItemList extends Component {

  constructor(props) {
    super(props)
    this.handle = this.handle.bind(this)
  }
  //组件 第一次存在于dom中，函数是不会执行的，如果已经存在于dom中，函数才会执行
  componentWillReceiveProps(){
    console.log(`child--------${this.props}`)
  }

  //nextProps:变化后的属性;
  //nextState:变化后的状态;

  shouldComponentUpdate(nextProps,nextState){
    if(nextProps.content !== this.props.content){
      console.log('child更新1-shouldComponentUpdate')
      return true
    }
    return false
  }
  componentWillUpdate(){
    console.log('child更新2-componentWillUpdate')
  }
  componentDidUpdate(){
    console.log('child更新3-componentDidUpdate')
  }

  handle() {
    this.props.dealtItem(this.props.index)
  }
  render() {
    return (
      <li onClick={this.handle}>
        {this.props.content}
      </li>
    )
  }
}

ItemList.propTypes = {
  content: PropTypes.string.isRequired,
  index: PropTypes.number,
  dealtItem: PropTypes.func,
}
